<template>
  <view class="container">
    <!-- 头部搜索区域 -->
    <u-sticky class="sticky">
      <u-search placeholder="搜索资讯、标题" v-model="listQuery.keyword" @search="handleSearch" @change="handleSearch"></u-search>
    </u-sticky>
    <!-- 招聘列表 -->
    <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" :bottombar="false" :down="downOption" @up="upCallback" :up="upOption"
      :fixed="false" top="10">
      <view class="news-list">
        <view class="news-item" v-for="(item, index) in list" :key="item.id" @click="handleNavInfo(item)">
          <view class="news-content">
            <text class="news-title">{{ item.title }}</text>
            <text class="news-summary">{{ item.summary }}</text>
            <view class="news-meta">
              <text class="news-time">{{ item.createTime }}</text>
              <text class="news-views">{{ item.viewCount }}阅读</text>
            </view>
          </view>
          <u-image :src="item.cover" width="160rpx" height="120rpx" border-radius="12rpx" mode="aspectFill"></u-image>
        </view>
      </view>
    </mescroll-body>
  </view>
</template>

<script>
  import MescrollMixin from "@/libs/mescroll-uni/components/mescroll-uni/mescroll-mixins.js"

  export default {
    mixins: [MescrollMixin],
    data() {
      return {
        mescroll: null,
        downOption: {
          use: true,
          auto: true
        },
        upOption: {
          page: {
            num: 0,
            size: 20,
            time: null
          },
          empty: {
            use: true,
            icon: null,
            tip: "暂无数据",
            fixed: false,
            top: "560rpx",
          },
          textNoMore: '没有更多数据',
          toTop: {
            duration: 300,
            supportTap: false,
            btnClick: null
          }
        },
        listQuery: {
          page: 1,
          pageSize: 20,
          keyword: ''
        },
        list: [],
      }
    },
    methods: {
      // mescroll初始化
      mescrollInit(mescroll) {
        this.mescroll = mescroll
      },
      upCallback(options) {
        this.listQuery.page = options.num
        this.listQuery.pageSize = options.size
        // console.log(`正在加载${options.num}页数据`)
        this.fetchData()
      },
      // 下拉刷新的回调 (mixin默认resetUpScroll)
      downCallback() {
        this.listQuery.page = 1
        if (this.mescroll.optUp.use) {
          this.mescroll.resetUpScroll()
        } else {
          setTimeout(() => {
            this.mescroll.endSuccess()
          }, 500)
        }
      },
      mescrollInit(mescroll) {
        this.mescroll = mescroll
      },
      handleSearch() {
        this.mescroll.resetUpScroll()
      },
      fetchData() {
        uni.$u.http.get('/api/news/list', { params: this.listQuery }).then(response => {
          let { code, message, result } = response.data
          if (code != 200) {
            this.mescroll.endErr()
            this.$u.toast(message)
            return
          }
          let { items, page, total, totalPages } = result
          if (result.page == 1) {
            this.list = new Array()
          }
          this.list = this.list.concat(items)
          // console.log(items)
          this.mescroll.endSuccess(items.length, page < totalPages)
        }).catch(err => {
          console.error('获取信息失败:', err)
          this.mescroll.endErr()
        })
      },
      handleSearch() {
        this.mescroll.resetUpScroll()
      },
      handleNavInfo(item) {
        this.$u.route({
          url: '/pages/zhaopin/detail',
          params: {
            id: item.id
          }
        })
      },
      // 收藏/取消收藏
      toggleCollect(job, index) {
        this.list[index].isCollected = !this.list[index].isCollected
        const action = this.list[index].isCollected ? '收藏' : '取消收藏'
        uni.showToast({
          title: `${action}成功`,
          icon: 'success'
        })
      },

      // 申请职位
      applyJob(job) {
        console.log('申请职位:', job.title)
        uni.showToast({
          title: '申请成功',
          icon: 'success'
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .sticky {
    background-color: #FFF !important;
    padding: 10upx;
    z-index: 999;
  }

  .container {
    min-height: 100vh;
    background: linear-gradient(180deg, #f0f9ff 0%, #ffffff 100%);
  }


  .news-list {
    background: white;
    margin: 0px 10rpx;

    .news-item {
      display: flex;
      gap: 24rpx;
      padding: 24rpx;
      border-bottom: 1rpx solid #f1f5f9;
      box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
      margin: 10upx 0upx;

      .news-content {
        flex: 1;

        .news-title {
          display: block;
          font-size: 28rpx;
          font-weight: 500;
          color: #1e293b;
          margin-bottom: 12rpx;
          line-height: 1.4;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }

        .news-summary {
          display: block;
          font-size: 24rpx;
          color: #64748b;
          line-height: 1.5;
          margin-bottom: 16rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }

        .news-meta {
          display: flex;
          gap: 24rpx;

          .news-time,
          .news-views {
            font-size: 22rpx;
            color: #94a3b8;
          }
        }
      }
    }
  }
</style>